<template>
    <el-popover
      popper-class="el-popover-select"
      placement="bottom"
      :width="`${width - 22}px`"
      trigger="click"
      v-model:visible="visible"
      @show="showStatus = true"
      @hide="showStatus = false"
    >
      <el-tree
        class="el-select-tree"
        ref="tree"
        id='menuIdTree'
        node-key="menuId"
        highlight-current
        :style="`width: ${width - 22}px`"
        :data="treeData"
        :props="defaultProps"
        :default-expand-all="expandAll"
        :expand-on-click-node="false"
        @node-click="handleNodeClick"
      />
      <template #reference>
        <el-input
          class="el-select-input"
          readonly
          :style="`width: ${width}px`"
          :suffix-icon="ArrowDown"
          v-model="selected"
          @click="showStatusClick"
          @blur="showStatusBlur"
          :class="{ rotate: showStatus }"
          :placeholder="placeholder"
          :size="size"
        />
      </template>
    </el-popover>
  </template>
  
  <script>
  import {computed, defineComponent, reactive, toRefs, ref, onMounted} from "vue";
  import { useStore } from 'vuex';
  import {
    ArrowDown
} from '@element-plus/icons-vue'
  
  export default defineComponent({
    name: "SelectTree",
    
    props: {
      modelValue: {
        type: [Number, String],
        default: "",
      },
      treeData: {
        type: Object,
        required: true,
      },
      width: {
        type: [Number, String],
        default: "230",
      },
      expandAll: {
        type: Boolean,
        default: false,
      },
      placeholder: {
        type: String,
        default: "请选择...",
      },
      size: {
        type: String,
        default: "default",
      },
      defaultProps: {
        type: Object,
        default: {
          children: "children",
          label: "label",
        },
      },
    },
    setup(props, { emit }) {
      const store = useStore();
      const tree = ref();
      const state = reactive({
        visible: false,
        showStatus: false,
        selected: "",
        treeData:props.treeData,
      });
      const size = computed(() => {
        return store.getters['setting/size'];
  });
      const defaultSelected = (value, data) => {
        data.filter((item) => {
          if (item.menuId == value) {
            state.selected = item.menuName;
          } else if (item.children) {
            defaultSelected(value, item.children);
          }
        });
      };
  
      defaultSelected(props.modelValue, props.treeData);
  
      const handleNodeClick = (data) => {
        
        state.visible = false;
        state.selected = data[props.defaultProps.label];
        emit("update:modelValue", data.menuId);
      };
      

      const showStatusClick=()=>{
        state.visible = !state.visible;
      }
      const showStatusBlur=(event)=>{
        if(event.relatedTarget.className.slice(0, 12)=='el-tree-node'){

        }else{
          state.visible = false;
        }
        
      }
      const Subcancel=()=>{
        state.visible = false;
        state.selected=''
      }
      onMounted(() => {
        tree.value.setCurrentKey(props.modelValue);
      });
  
      return {
        ...toRefs(state),
        ArrowDown,
        size,
        Subcancel,
        handleNodeClick,
        showStatusBlur,
        showStatusClick,
        tree,
      };
    },
  });
  </script>
  
  <style>
  .select-tree {
    padding: 0 10px;
  }
  .el-popover-select{
    overflow-y: auto;
  }
  .el-select-tree .el-tree-node__content {
    height: 34px;
    z-index: 1000;
  }
  
  .el-select-input .el-input__inner,
  .el-select-input .el-input__suffix {
    cursor: pointer;
  }
  
  .el-select-input.rotate .el-input__suffix {
    transform: rotate(-180deg);
  }
  </style>
  